<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>西外可视化分析大屏</title>
    <link rel="stylesheet" href="../static/assets/css/iconfont.css">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/infrastructureRisk.css">
    <script src="../static/assets/js/jquery-3.3.1.min.js"></script>
</head>
<body id="investmentRisk">
<div id="container">
    <script src="../static/js/common.js"></script>
    <header>
        <div class="header-l">
            <h1 class="zh">一带一路国家基础设施发展指数</h1>
            <h1 class="en">Infrastructure development index in countries along Belt and Road</h1>
        </div>
        <div class="header-r">
            <time id="headerTime"></time>
        </div>
    </header>
    <main>
        <!--样式里的l,m,r,t,b分别代表左，中，右，上，下-->
       <div class="l">
           <div class="l-t">
               <h3 class="zh">一带一路国家总指数趋势</h3>
               <h3 class="en">Combined index tendency in countries along Belt and Road</h3>
               <div class="echart-box" id="ec01_line_trend"></div>
               <div class="index_all">
                   <i class="iconfont icon-shuju"></i>
                   <span>总指数：</span><span>124</span>
               </div>
           </div>
           <div class="l-b">
               <h3 class="zh">一带一路发展潜力TOP5</h3>
               <h3 class="en">Top 5 countries in terms of development potential under the Belt and Road Initiative</h3>
               <div class="echart-box" id="ec02_line_trend"></div>
           </div>
       </div>
        <div class="m">
            <div class="m-t">
                <h3 class="zh">一带一路国家发展指数TOP10</h3>
                <h3 class="en">Top 10 countries along Belt and Road in terms of development index</h3>
                <div class="echart-box" id="ec01_bar_trend"></div>
                <div class="select_box">
                    <select name="" id="select_time">
                        <option value="2018">2018年</option>
                        <option value="2017">2017年</option>
                        <option value="2016">2016年</option>
                        <option value="2015">2015年</option>
                        <option value="2014">2014年</option>
                        <option value="2013">2013年</option>
                        <option value="2012">2012年</option>
                        <option value="2011">2011年</option>
                        <option value="2010">2010年</option>
                        <option value="2009">2009年</option>
                    </select>
                </div>
            </div>
            <div class="m-b">
                <h3 class="zh">一带一路发展趋势TOP5</h3>
                <h3 class="en">Top 5 countries in terms of development tendency under the Belt and Road Initiative</h3>
                <div class="echart-box" id="ec03_line_trend"></div>
            </div>
        </div>
        <div class="r">
            <div class="r-t">
                <h3 class="zh">一带一路沿线国家能源业指数</h3>
                <h3 class="en">Energy industry index in countries along Belt and Road</h3>
                <div class="echart-box" id="ec02_bar_trend"></div>
                <div class="logo">
                    <span class="circle"></span>
                    <span>领域 - 能源</span>
                </div>
            </div>
            <div class="r-b">
                <div class="r-b-l">
                    <h3 class="zh">能源业新签合同额区域分布</h3>
                    <h3 class="en">Areal distribution in terms of newly signed contracts amount in the energy industry</h3>
                    <div class="echart-box" id="ec01_pie_trend"></div>
                </div>
                <div class="r-b-r">
                    <h3 class="zh">能源业产值区域分布</h3>
                    <h3 class="en">Areal distribution in terms of production value in the energy industry</h3>
                    <div class="echart-box" id="ec02_pie_trend"></div>
                </div>

            </div>
        </div>
    </main>
</div>
<script src="../static/assets/js/echarts-4.2.0.js"></script>
<script src="../static/js/chartsCom.js"></script>
<script src="../static/js/infrastructureRisk.js"></script>
<script>
    $(function () {
       init();
       // 一带一路国家发展指数TOP10 时间筛选
        //2018: [158,142,137,136,136,134,131,131,130,129],
        //2017 [164,140,129,146,154,124,124,134,145,135]
        //2016 [151,135,134,136,150,125,126,131,142,135]
        //2015 [143,152,127,149,148,138,132,137,144,140]
        //2014 [147,151,118,143,151,125,132,131,142,142]
        //2013 [148,151,120,147,143,120,125,130,139,129]
        //2012 [151,148,118,159,140,131,132,136,155,132]
        //2011 [153,147,114,155,138,132,137,128,147,131]
        //2010 [140,141,111,122,135,120,112,118,138,125]
        //2009 [138,147,114,144,138,111,126,128,142,131]
        $("#select_time").on('change',function () {
            var checkValue=$("#select_time").val();
            switch (checkValue){
                case '2018':
                    ec01_bar([158,142,137,136,136,134,131,131,130,129]);
                    break;
                case '2017':
                    ec01_bar([164,140,129,146,154,124,124,134,145,135]);
                    break;
                case '2016':
                    ec01_bar([151,135,134,136,150,125,126,131,142,135]);
                    break;
                case '2015':
                    ec01_bar([143,152,127,149,148,138,132,137,144,140]);
                    break;
                case '2014':
                    ec01_bar([147,151,118,143,151,125,132,131,142,142]);
                    break;
                case '2013':
                    ec01_bar([148,151,120,147,143,120,125,130,139,129]);
                    break;
                case '2012':
                    ec01_bar([151,148,118,159,140,131,132,136,155,132]);
                    break;
                case '2011':
                    ec01_bar([153,147,114,155,138,132,137,128,147,131]);
                    break;
                case '2010':
                    ec01_bar([140,141,111,122,135,120,112,118,138,125]);
                    break;
                case '2009':
                    ec01_bar([138,147,114,144,138,111,126,128,142,131]);
                    break;
            }
        })


    })
</script>
</body>
</html>







